<template>
	<view class="pwd-retrieve-container">
		<u-form :model="user" ref="form" label-width="80px">
			<u-form-item label="旧密码" prop="oldPassword">
				<u-input v-model="user.oldPassword" :type="type" :border="border" :password-icon="passwordIcon"
					placeholder="请输入旧密码" /></u-form-item>
			<u-form-item label="新密码" prop="newPassword">
				<u-input v-model="user.newPassword" :type="type" :border="border" :password-icon="passwordIcon"
					placeholder="请输入新密码" /></u-form-item>
			<u-form-item label="确认密码" prop="confirmPassword">
				<u-input v-model="user.confirmPassword" :type="type" :border="border" :password-icon="passwordIcon"
					placeholder="请确认新密码" /></u-form-item>
			<button type="primary" @click="submit">提交</button>
		</u-form>
	</view>
</template>

<script>
	import {
		updateUserPwd
	} from "@/api/system/user"

	export default {
		data() {
			return {
				type: 'password',
				passwordIcon: true,
				border: true,
				user: {
					oldPassword: undefined,
					newPassword: undefined,
					confirmPassword: undefined
				},
				rules: {
					oldPassword: [{
						required: true,
						message: '旧密码不能为空',
						trigger: ['blur']
					}],
					newPassword: [{
						required: true,
						message: '新密码不能为空',
						trigger: ['blur']
					}],
					confirmPassword: [{
						required: true,
						message: '确认密码不能为空',
						trigger: ['blur']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return value === this.user.newPassword;
						},
						message: '两次输入的密码不一致',
						trigger: ['change']
					}]
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
						this.$modal.msgSuccess("修改成功")
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.pwd-retrieve-container {
		padding-top: 36rpx;
		padding: 15px;
	}
</style>